import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import { Button, Space, Divider, Tag, Popconfirm, Modal, message } from 'antd';
import { FC, useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { updateQuestionList, copyQuestionList } from '@/services/question';
import { useRequest } from 'ahooks';
import styles from './style.module.scss';

// 定义组件接收的属性类型
type PropsType = {
  _id: string;              // 问卷ID
  title: string;            // 问卷标题
  isPublished: boolean;     // 是否已发布
  isStar: boolean;          // 是否标星
  isDeleted: boolean;       // 是否已删除
  answerCount: number;      // 回答数量
  createAt: string;         // 创建时间
};

/**
 * 问卷卡片组件
 * 展示单个问卷的基本信息和操作按钮
 */
const QuestionCard: FC<PropsType> = (props: PropsType) => {
  // 解构获取问卷属性
  const { _id, title, isPublished, isStar, answerCount, createAt } = props;
  // 标星状态管理
  const [isStarState, setIsStarState] = useState(isStar);

  // 获取Modal确认框实例
  const { confirm } = Modal;
  // 路由导航实例
  const navigate = useNavigate();

  // 标星/取消标星功能的请求处理
  const { loading: changeStarLoading, run: changeStar } = useRequest(
    async () => {
      // 调用API更新问卷的标星状态
      await updateQuestionList(_id, { isStar: !isStarState });
    },
    {
      manual: true, // 手动触发请求
      onSuccess: () => {
        // 请求成功后更新本地状态并提示用户
        setIsStarState(!isStarState);
        message.success('修改成功');
      },
    }
  );

  // 复制问卷功能的请求处理
  const { loading: duplicateLoading, run: duplicate } = useRequest(
    async () => await copyQuestionList(_id),
    {
      manual: true, // 手动触发请求
      onSuccess: (res) => {
        // 请求成功后提示用户并跳转到编辑页面
        message.success('复制成功');
        navigate(`/question/edit/${res.id}`);
      },
    }
  );

  // 删除状态管理
  const [isDeletedState, setIsDeletedState] = useState(false);
  // 删除问卷功能的请求处理
  const { loading: deleteLoading, run: deletQuestion } = useRequest(
    async () => await updateQuestionList(_id, { isDeleted: true }),
    {
      manual: true, // 手动触发请求
      onSuccess: () => {
        // 请求成功后更新本地状态并提示用户
        message.success('删除成功');
        setIsDeletedState(true);
      },
    }
  );
  
  // 如果已删除则不渲染组件
  if (isDeletedState) return null;
  
  // 删除确认对话框
  const del = () => {
    confirm({
      title: '确定要删除吗？',
      icon: <ExclamationCircleOutlined />,
      onOk: deletQuestion, // 确认后执行删除操作
    });
  };

  return (
    // 问卷卡片容器
    <div key={_id} className={styles.container}>
      {/* 问卷标题和基本信息 */}
      <div className={styles.title}>
        <div className={styles.left}>
          {/* 根据发布状态跳转到统计页或编辑页 */}
          <Link
            to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}
          >
            <Space>
              {/* 如果已标星则显示标星图标 */}
              {isStarState && <StarOutlined style={{ color: 'red' }} />}
              {title}
            </Space>
          </Link>
        </div>
        <div className={styles.right}>
          <Space>
            {/* 显示发布状态标签 */}
            {isPublished ? (
              <Tag color="processing">已发布</Tag>
            ) : (
              <Tag>未发布</Tag>
            )}
            {/* 显示回答数量和创建时间 */}
            <span>答卷:{answerCount}</span>
            <span>{createAt}</span>
          </Space>
        </div>
      </div>
      {/* 分割线 */}
      <Divider style={{ margin: '12px 0' }} />
      {/* 操作按钮区域 */}
      <div className={styles['button-container']}>
        <div className={styles.left}>
          <Space>
            {/* 编辑问卷按钮 */}
            <Button
              icon={<EditOutlined />}
              type="text"
              size="small"
              onClick={() => navigate(`/question/edit/${_id}`)}
            >
              编辑问卷
            </Button>
            {/* 问卷统计按钮（未发布时禁用） */}
            <Button
              icon={<LineChartOutlined />}
              type="text"
              size="small"
              onClick={() => navigate(`/question/stat/${_id}`)}
              disabled={!isPublished}
            >
              问卷统计
            </Button>
          </Space>
        </div>
        <div className={styles.right}>
          <Space>
            {/* 标星/取消标星按钮 */}
            <Button
              icon={<StarOutlined />}
              type="text"
              size="small"
              disabled={changeStarLoading}
              onClick={changeStar}
            >
              {isStarState ? '取消标星' : '标星'}
            </Button>
            {/* 复制问卷按钮（带确认弹窗） */}
            <Popconfirm
              title="确定复制该问卷吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={duplicate}
            >
              <Button
                icon={<CopyOutlined />}
                type="text"
                size="small"
                disabled={duplicateLoading}
              >
                复制
              </Button>
            </Popconfirm>

            {/* 删除问卷按钮 */}
            <Button
              icon={<DeleteOutlined />}
              type="text"
              size="small"
              onClick={del}
              disabled={deleteLoading}
            >
              删除
            </Button>
          </Space>
        </div>
        <div></div>
      </div>
    </div>
  );
};

export default QuestionCard;

